<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .state{
        fill: none;
        stroke: #a99f82;
        stroke-width: 1;
    }
    .state:hover{
        fill-opacity:0.5;
    }
    #tooltip {
        position: absolute;
        text-align: center;
        padding: 20px;
        margin: 10px;
        font: 12px sans-serif;
        background: #de7779;
        border: 1px;
        border-radius: 2px;
        pointer-events: none;
    }
    #tooltip h4{
        margin:0;
        font-size:14px;
    }
    #tooltip{
        background: rgba(0, 0, 0, 0.34);
        border:1px solid #5d5a80;
        border-radius:5px;
        font-size:12px;
        width:auto;
        padding:4px;
        color: #fffffb;
        opacity:0;
    }
    #tooltip table{
        table-layout:fixed;
    }
    #tooltip tr td{
        padding:0;
        margin:0;
    }
    #tooltip tr td:nth-child(1){
        width:50px;
    }
    #tooltip tr td:nth-child(2){
        text-align:center;
    }
</style>
<body>
<div id="tooltip"></div><!-- div to hold tooltip. -->
<svg width="560" height="470" id="statesvg"></svg> <!-- svg to hold the map. -->
<script src="china-zh2.js"></script> <!-- creates uStates. -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    function tooltipHtml(n, d){    /* function to create html content string in tooltip div. */
        return "<h4>"+n+"</h4><table>"+
            //"<tr><td>Low</td><td>"+(d.low)+"</td></tr>"+
            //"<tr><td>Average</td><td>"+(d.avg)+"</td></tr>"+
            //"<tr><td>High</td><td>"+(d.high)+"</td></tr>"+
            "<tr><td>总数</td><td>"+(d.high)+"</td></tr>"+
            "<tr ><td>正常</td><td>"+(d.avg)+"</td></tr>"+
            "<tr><td>离线</td><td>"+(d.high)+"</td></tr>"
            "</table>";
    }

    var sampleData ={};    /* Sample random data. */
    ['JXI', 'LIA', 'TIB', 'NMG', 'SHH', 'CHQ', 'XIN', 'SHD', 'HEN', 'GUD', 'GUI', 'BEJ', 'MAC', 'TAJ', 'HLJ', 'HEB', 'ZHJ', 'ANH', 'GXI', 'HAI', 'JIL', 'SHX', 'HUN', 'YUN', 'FUJ', 'HUB', 'SHA', 'HKG', 'QIH', 'GAN', 'JSU', 'SCH', 'NXA', 'TAI']
        .forEach(function(d){
            var low=Math.round(100*Math.random()),
                mid=Math.round(100*Math.random()),
                high=Math.round(100*Math.random());
            sampleData[d]={low:d3.min([low,mid,high]), high:d3.max([low,mid,high]),
                    avg:Math.round((low+mid+high)/3), color:d3.interpolate("#84cfff", "#d0e6e8")(low/100)};
        });

    /* draw states on id #statesvg */
    uStates.draw("#statesvg", sampleData, tooltipHtml);
</script>
</body>